import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Switch } from 'react-router'
import { PrivateRoute, Redirect } from 'components/route'
import { Query } from 'react-apollo'
import { global as globalDuck, dataset as datasetDuck } from 'ducks'
import { PaddingContainer } from 'components/containers'
import GetCurrentDatasetMember from 'graphql/dataset/getCurrentDatasetMember.graphql'
import Data from './data'
import Config from './config'
import Nav from './nav'
import NewFolder from './newFolder'
import Upload from './upload'

class Org extends Component {
  state = { activeItem: '' }

  componentDidMount = () => {
    const { actionSetActiveNavItem } = this.props
    actionSetActiveNavItem('org')
  }

  setActiveItem = item => this.setState({ activeItem: item })

  render() {
    const { location, match, user } = this.props
    const { orgName, datasetName } = match.params
    const { activeItem } = this.state
    return (
      <Query query={GetCurrentDatasetMember} variables={{ userId: user.id, orgName, datasetName }}>
        {({ loading, error, data }) => {
          if (loading) return 'Loading...'
          if (error) return `Error! ${error.message}`
          if (data.org_member.length === 0 || data.dataset.length === 0) return 'Error! not fount'
          const orgMember = data.org_member[0]
          const dataset = data.dataset[0]
          const { role } = orgMember
          return (
            <React.Fragment>
              <Nav
                activeItem={activeItem}
                orgName={orgName}
                datasetName={datasetName}
                role={role}
              />
              <PaddingContainer>
                <Switch location={location}>
                  {(role === 'admin' || role === 'owner') && (
                    <React.Fragment>
                      <PrivateRoute
                        path={`${match.url}/data/:path*`}
                        render={props => (
                          <Data
                            {...props}
                            setParentActiveItem={this.setActiveItem}
                            activeDatasetId={dataset.id}
                            activeDataset={datasetName}
                            orgName={orgName}
                          />
                        )}
                        exact={false}
                      />
                      <PrivateRoute
                        path={`${match.url}/config`}
                        render={props => (
                          <Config
                            {...props}
                            setParentActiveItem={this.setActiveItem}
                            activeDatasetId={dataset.id}
                            activeDataset={datasetName}
                            orgName={orgName}
                          />
                        )}
                        exact={false}
                      />
                      <PrivateRoute
                        path={`${match.url}/newFolder/:path*`}
                        render={props => (
                          <NewFolder
                            {...props}
                            setParentActiveItem={this.setActiveItem}
                            activeDatasetId={dataset.id}
                            activeDataset={datasetName}
                            orgName={orgName}
                          />
                        )}
                        exact={false}
                      />
                      <PrivateRoute
                        path={`${match.url}/upload/:path?`}
                        render={props => (
                          <Upload
                            {...props}
                            setParentActiveItem={this.setActiveItem}
                            activeDatasetId={dataset.id}
                            activeDataset={datasetName}
                            orgName={orgName}
                          />
                        )}
                        exact={false}
                      />
                      <Redirect exact path={`${match.url}`} to={`${match.url}/data`} />
                    </React.Fragment>
                  )}
                </Switch>
              </PaddingContainer>
            </React.Fragment>
          )
        }}
      </Query>
    )
  }
}

const mapStateToProps = state => ({
  user: globalDuck.selectors.user(state),
})

const mapDispatchToProps = {
  actionSetActiveNavItem: globalDuck.creators.actionSetActiveNavItem,
  actionReciveDatasets: datasetDuck.creators.actionReciveDatasets,
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(Org)
